<template>
    
    
    <a-card :bordered="false">
        <div class="table-page-search-wrapper">
        
        </div>
        
        <div class="table-operator">
            <a-row>
                <a-col :span="8">
                    <a-button type="primary" @click="gotoAdd" icon="plus">新建</a-button>
                </a-col>
                <a-col :span="10">
                    <a-input-search
                        placeholder="输入项目名称搜索"
                        @search="onSearch"
                        enterButton="Search"
                        size="large"/>
                </a-col>
            </a-row>
        
        
        </div>
        
        <a-table
            ref="table"
            size="default"
            :columns="columns"
            :dataSource="tableData"
            :showAlertInfo="true"
            @change="TableChange"
        >
            <span slot="number" slot-scope="text,record,index">
                
                {{tableSerialNumber + index + 1 }}
            </span>
            <span slot="name" slot-scope="text,record,index"> <a href="#" @click="showDetail(record.id)" class="name-href">{{record.name}}</a> </span>
            <span slot="action" slot-scope="text, record">
        <a @click="handleApproal(record)"><a-icon type="check-circle"/>审核</a>
          <a-divider type="vertical"/>
<!--        <a @click="handleEdit(record)"><a-icon type="edit"/>编辑</a>-->
<!--          <a-divider type="vertical"/>-->
        <a @click="handleDelete(record)" style="color: red;"><a-icon type="delete"/>删除</a>
        
      </span>
        </a-table>
    
    
    </a-card>
  
</template>

<script>
    import STable from '@/components/table/'
    import ATextarea from "ant-design-vue/es/input/TextArea"
    import AInput from "ant-design-vue/es/input/Input"
    import moment from "moment"

    import {getRoleList, getServiceList} from '@/api/manage'

    import indexedDB from '../../db/db'
    import {project} from "../../db/project"

    export default {
        name: "TableList",
        components: {
            AInput,
            ATextarea,
            STable,
        },
        data() {
            return {
                visible: false,
                labelCol: {
                    xs: {span: 24},
                    sm: {span: 5},
                },
                wrapperCol: {
                    xs: {span: 24},
                    sm: {span: 12},
                },
                form: null,
                mdl: {},

                // 高级搜索 展开/关闭
                advanced: true,
                // 查询参数
                queryParam: {},
                // 表头
                columns: [
                    {
                        title: '序号',
                        dataIndex: 'number',
                        scopedSlots: {customRender: 'number'},
                    },
                    {
                        title: '项目编号',
                        dataIndex: 'project_number',
                    },
                    {
                        title: '项目名称',
                        dataIndex: 'name',
                        scopedSlots: {customRender: 'name'},
                    },
                    {
                        title: '建档日期',
                        dataIndex: 'docs_create_date',
                    },
                    {
                        title: '状态',
                        dataIndex: 'state',
                    },
                    {
                        title: '发布人',
                        dataIndex: 'docs_creator',
                    },
                    {
                        title: '操作',
                        dataIndex: 'action',
                        width: '150px',
                        scopedSlots: {customRender: 'action'},
                    },
                ],


                selectedRowKeys: [],
                selectedRows: [],
                //数据库
                tableData: [],
                tableSerialNumber: null,
                
            }
        },
        created() {
            getRoleList({t: new Date()})
        },
        mounted() {
            indexedDB.initDB()
            indexedDB.batInit('project', project)
            this.getProjectsList()
        },
        methods: {
            getProjectsList() {
                let that = this
                indexedDB.handleDataByCursor('project', '').then(res => {
                        that.tableData = res
                })
            },
            onSearch(value) {
                console.log(value)
                let keyRange = IDBKeyRange.lowerBound(value)
                indexedDB.handleDataByIndex('project',keyRange,'name').then(res => {
                    this.tableData = res
                })
                
            },
            handleApproal(record) {
                let that = this
                this.$confirm({
                    title: '确定审核通过该项目',
                    content: '该操作不可逆转',
                    onOk() {
                        record.state = '审核通过'
                        indexedDB.update({name: 'project'}, record).then(()=>{
                            that.$message.success(`项目${record.name} 审核通过`)
                        })
                    }
                })

            },
            handleEdit(record) {

            },
            handleDelete(record) {
                let that = this
                this.$confirm({
                    title: `确定删除项目【${record.name}】吗？`,
                    content: '该操作不可逆转',
                    okText: '确定',
                    okType: 'danger',
                    cancelText: '取消',
                    onOk() {
                        indexedDB.delete({name:'project'},record.id).then(()=>{
                            that.$message.success(`项目${record.name} 删除成功`)
                            that.getProjectsList()
                        })
                    }
                });
            },

            gotoAdd(){
                this.$router.push({name:'AddProject'})
            },
          showDetail(id){
              this.$router.push({path: '/Project/ProjectDetail/ProjectApproval', query: {objId: id,current:'0'}})
          },
            TableChange(e){
                if (e.current === 1) {
                    this.tableSerialNumber = 0
                } else {
                    this.tableSerialNumber = (e.current - 1 ) * e.pageSize
                }
                
            }

        },
        watch: {
            /*
            'selectedRows': function (selectedRows) {
              this.needTotalList = this.needTotalList.map(item => {
                return {
                  ...item,
                  total: selectedRows.reduce( (sum, val) => {
                    return sum + val[item.dataIndex]
                  }, 0)
                }
              })
            }
            */
        },
    }
</script>
<style>
    a.name-href:hover {
        color: red;
    }
</style>